<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景操作</title>
		<style>
			/*
			background-color: 背景颜色
			background-image: 背景图片
			backgorund-repeat: 是否平铺  repeat-x repeat-y no-repeat
			background-position:  背景图片位置
			     1; position || postion 
				  方位名词: center|top|left|right|bottom 
				 2;length || length
				  第一个值 x坐标 第二个 y坐标
				 3: x% || y%
				 4:  position|| length   混合使用
		    background-attachment  是否随着滚轮 滚动
			    fixed   不滚动
				scroll 滚动
		    background 简写形式
			background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
			背景颜色半透明:
			   background; rgba(0,0,0,0.3)
			设置背景图片的大小:
				background-size: 宽度 高度 
				如果只写一个 对应的会同比缩放 尽量只写一个 
				background-size; cover 保证图片铺满屏幕,溢出部分不显示
				content 保证图片完整显示 会漏掉某些部分盖不住
			 多背景图片:(css3)
			 如果位置冲突的话,那么前一个会覆盖后一个,通常后一组颜色定义在最后一组
			 background: url() no-repeat scoll top center,
						url() no-repeat scoll top center,
						url() no-repeat scoll top center #aaa;
				
			*/
			body{
				width: 600px;
				height: 700px;
		/*		background-image: url(img/icon_gift_selected.png);
				background-repeat: no-repeat;
				background-position: 50% 20px;
				background-attachment: scroll;*/
				
				background: #000000 url(img/猪猪两口子.jpg) repeat-y scroll center 25px;
			background-size: 100%;
			}
			div{
				width: 100px;
				height: 100px;
				background: rgba(0,0,0,0.4);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
